import * as PIXI from 'pixi.js';
const Pixi = () => {
    const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: false,
        resolution: 1,
        backgroundColor:'#23abf2'
    });
    document.body.appendChild(app.view);
    const rectangle = new PIXI.Graphics();
    rectangle.beginFill(0xff0000);//填充颜色
    rectangle.drawRect(0,0,100,100);//绘制矩形
    rectangle.endFill();//结束绘制
    app.stage.addChild(rectangle);//将图形添加到舞台
    //图形位移
    rectangle.position.x = 100;
    rectangle.y = 100;
    //图形旋转
    // rectangle.rotation = 0.5;
    //图形缩放
    rectangle.scale.x = .5;
    const circle = new PIXI.Graphics();//创建一个圆形
    circle.beginFill(0xff0000);//填充颜色
    circle.drawCircle(300,300,50);//绘制圆形
    circle.endFill();//结束绘制
    app.stage.addChild(circle);
    //绘制照片
    const img = new Image();
    img.src = '/images/1.jpg';
    img.onload = ()=>{
        const texture = PIXI.Texture.from(img);
        const sprite = new PIXI.Sprite(texture);
        sprite.x = 500;//设置x轴位置
        sprite.y = 500;//设置y轴位置
        sprite.width = 100;//设置宽度
        sprite.height = 100;//设置高度
        app.stage.addChild(sprite);
    }
    //绘制爱心
    const heart = new PIXI.Graphics();
    heart.beginFill('pink');
    heart.moveTo(75,40);
    heart.bezierCurveTo(75,37,70,25,50,25);
    heart.bezierCurveTo(20,25,20,62.5,20,62.5);
    heart.bezierCurveTo(20,80,40,102,75,120);
    heart.bezierCurveTo(110,102,130,80,130,62.5);
    heart.bezierCurveTo(130,62.5,130,25,100,25);
    heart.bezierCurveTo(85,25,75,37,75,40);
    heart.endFill();
    heart.x = 300;
    heart.y = 100;
    app.stage.addChild(heart);
    return (
        <div>
    
        </div>
    )
    
}
export default Pixi;